<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas example</title>
<script>
	window.onload=function(){
		var canvas = document.getElementById("mycanvas");
		var ctx = canvas.getContext("2d");
		ctx.strokeStyle='#ff0000';
		ctx.fillStyle = '#00ffff';
		ctx.strokeRect(100,100,300,300);
		ctx.fillRect(200,200,100,100);
		
		
		var color = new Array('#ff0000','#00ff00','#0000ff','#ffff00','#00ffff','#ff00ff','#000000','#212121','#ffff0f');
		var j=0;
		for(i=10;i<500;i=i+60){
			ctx.fillStyle=color[j];
			ctx.fillRect(i,450,55,55);
			j++;
		}
	}

</script>

</head>
<body>
	<canvas id='mycanvas'width='600px'height='500px'></canvas>
</body>
</html>